<template>
  <div class="body">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
import data from "../../../assets/json/词云图.json";
import Bus from "../../eventBus";
import { useStore } from "vuex";
import { option } from "./option.js";

export default {
  name: "CiYunTu",
  data() {
    return {
      arr: data,
      msg: [],
      chart: null,
      myoption: option,
    };
  },
  methods: {},
  setup() {
    const store = useStore();
    return {
      store,
    };
  },
  created() {
    Bus.on("share", (val) => {
      this.msg = val;
      console.log("我收到啦！！！", this.msg);
      this.myoption.series[0].data = this.arr[this.msg[0]];
      this.chart.setOption(this.myoption);
    });
    Bus.on("shareSearch", (val) => {
      this.myoption.series[0].data = this.arr[val];
      this.chart.setOption(this.myoption);
    });
  },
  mounted() {
    this.chart = echarts.init(document.getElementById("main"));
    this.myoption.series[0].data = this.arr["total"];
    this.chart.setOption(this.myoption);
    window.onresize = this.chart.resize;
  },
};
</script>

<style>
.body {
  height: 100%;
  width: 100%;
}

#main {
  width: 94%;
  height: 88%;
  margin-left: 5%;
  margin-top: 7%;
}
</style>

